JSP

טכנלוגיית JSP פותחה ע"י סאן מיקרוסיסטמס כתשובה לטכנלוגיית .ASP של מיקרוסופט כחלק מטכנלוגיית J2EE.
JSP - נותנת פתרון מלא לפיתוח אתרי אינטרנט ע"י JAVA , HTML ו USER TAGS.

יתרונות על ASP :

* מבוססת על שפה מונחית עצמים.
* רצה על כל פלטפורמה.
* ניתן להתשמש בה על שרתי קוד פתוח כדוגמה : אפאצי וג'טי.
*ביצועים מהירים יותר מ ASP- בגלל תהליך הHOT SPOT -תהליך שיפור של החלפת קוד באופן דינמי בקוד מקור של המעבד.

JavaScript -DOM

DOM -ducument object model
DOM מייצג מסמך HTML במודל אובייקטים היירכי.
המודל מקנה יעילות לגשת לקוד כלשהוא ובצע בו שינויים -לשנות משתנים וארגומנטים.
החופש והקלות בשימוש תלוי בגרסת הדפדפן ככל שהדפדפן חדיש יותר ככה זה יותר יעיל.

 אובייקטים

WINDOWS- מייצג חלום בדפדפן , מיוצר אוטומטית עבור כל מופע של BODY או FRAMSET.

DUCUMENT- מייצג את תוכן דף הHTML באמצעותו ניתן לגשת בקלות לכל הרכיבים בדף.

INNERHTML- מחזיר את הטקסט שכתוב בדף, באמצעותו ניתן לגשת בקלות לתוכן התג.

מנהלי ארועים

רכיבי יישום- רכיב יישום הוא רכיב שימוש או ארוע לדוגמה לחצן, רכיבי יישום הם בעלי אוסף של שיטות וארועים.

ישנם  2 סוגים למטפלי ארועים:

1) מטפלים אינטראקטיבים- טיפול אשר תלוי באינטרקציה בין המשתמש לרכיב כלשהוא ,לדוגמה המשתמש לחץ על לחצן שליחת טופס.

2) מטפלים אוטומטיים מבצעים קוד באופן אוטמטי לפי משתנה כלשהם , לדוגמה : בכל יום בשעה 00:00 יש קריאה קוקוריקו מהדף.

JAVA SCRIPT -תכונות ומרכיבי שפה

JAVASCRIPT-להלן JS היא שפה מונחית אירועים כלומר ארוע כלשהוא מתרחש על דף ווב הארוע מפעיל פונקציית JS אשר גורם לביצוע פעולה כלשהיא.
הפונקציה אינה פועלת עד שקורא בדף משהו שמפעיל את הפונקציה כגון : לחיצה על כפתור , אישום טופס , וכו'
שפת JS היא שפה רגישה לאותות CASE SENSTIVE כלומר השפה מבדילה בין אות גדולה לאות קטנה ומפרשת אותם שונה.
פונקציות הJS נכתבות בתוך מסמך HTML, בין תגי HEAD כתיבת הפונקציה בתוך ה HEAD מבטיחה כי טעינתן תעשה לפני טעינת הBODY.
מבנה פונקצייה JS כולל ציון המילה FUCTION ואחריה שם הפונקציה.
כל משפט הצהרה חייב  להסתיים בתו ;
כאשר מתבצעת הרצה של פונקציה יש להעריך שאחד הפעולות הנ"ל בוצעה:

 1. לחיצה על לחצן פקודת טופס.
2. לחיצה על קישור.
3. בחירה מתיבה אפשרויות.
4. טעינה של מסמך.
וכו'...

המשותף לכל הדרכים בהם הרצה של פונקציה מתבצעת הוא הצורך בארוע כלשהוא.

בשפת JS ישנם מספר מילים שמורות כדוגמה:
VAR- הכרזה על משתנה , טיפוס המשתנה בשפת JS יקבע אוטומטית לפי הזנת המשתנה.
אם המשתנה בתוך הפונקציה הוא יוכרז לוקלית לפונקציה הספיציפית הנ"ל.
משתנה אשר הוכרז בראש הפונקציה יוכרז גלובלית.


ישנם מספר פונקציות מובנות אנו נסקור בריפרוף מספר קטן מהם:

1) EVAL -מחשבת מחרוזת כביטויים .
2)PARSELINT- הופכת ארגומט מחרוזת למספר שלם.
3)PARSELFOALT-הופכת ארגומנט מחרוזת למספר שלם.

JavaScript

שפת סקריפטים, פותחה ע"י חברת Netscape ב 1995 כשיטה לביצוע validation ותגובה דינמית של הדפדפן בצד של המשתמש (Client).

שפות תכנות כמו    JavaScriptה-"מתפרשות תוך כדי ביצוע" (interpreted), הנן שפות שבהן פקודות התוכנית נקראות אחת אחרי השנייה בזמן "ריצת" התוכנית, ורק אז מתורגמות לפקודות ברמה נמוכה יותר (קוד מכונה).

אם במהלך כתיבת התוכנית עשינו שגיאה (תחבירית), השגיאה תתגלה רק בזמן שהמחשב ינסה לבצע את הפקודה – אין שלב קומפילציה לשפה זו. 

שפת JavaScript הינה שפה מונחת אירועים. אירוע המתרחש על גבי עמוד ה WEB, מפעיל פונקצית  JavaScript אשר בתורה מבצעת פעולה כלשהי. הפונקציה, למרות שכתובה בדף הHTML  - איננה מתחילה לפעול עד לרגע בו הופעלה באופן אקטיבי על ידי אירוע כלשהו.

מדריך HTML - טפסים

לא פעם ולא פעמיים אנחנו רוצים לקבל אינפורמציה מהגולש, ואת זה עושים באמצעות טפסים. בכדי לכתוב טופס מתחילים בתג <form>

לדוגמא, הקוד הבא:

1.  <form name="example" method="get" action="html_page13.html">  

2.      :שם פרטי <input type="text" name="firstname">  

3.      :שם משפחה <input type="text" name="lastname">  

4.  </form>  

<form name="example" method="get" action="html_page13.html">

    :שם פרטי <input type="text" name="firstname">

    :שם משפחה <input type="text" name="lastname">

</form>

יצור את זה:

שם פרטי:
שם משפחה:

המאפיין החשוב ביותר של התג form הוא action, שמציין לאן ישלח הטופס.

מאפיינים נוספים:

method מציין את שיטת שליחת הנתונים, מקבל אחד מהערכים get או post. ל get יש הגבלת אורך של 256 תווים.
target מציין איפה יפתח הדף שאליו נשלח הטופס, מקבל את הערכים _blank, _top, _parent, או שם של מסגרת.

האלמנטים שטופס יכול להכיל הם תיבות טקסט, תיבות ססמא, תיבות סימון, כפתורי רדיו, אזורי טקסט, תיבות בחירה, תיבות בחירה מרובה, תיבות קובץ, וכפתורים.


התג <input> מאפשר לנו ליצור מגוון של תיבות קלט. המאפיין שאחראי על סוג תיבת הקלט הוא type. הוא מקבל אחד מהערכים הבאים: text, checkbox, radio, password, hidden, submit, reset, button, file, image. עוד מאפיין חשוב של התג input הוא name. המאפיין הזה קובע מהו שם האלמנט.

דוגמאות לתג input:

תיבת טקסט:

והקוד:

1.  <input type="text" name="text1">    

<input type="text" name="text1">  

המאפיינים של תיבת טקסט הם:

name קובע את השם של תיבת הטקסט. זה יהיה מאוד משמעותי בהמשך.
maxlength קובע את הגודל המקסימאלי של הקלט, מקבל מספר תווים.
size קובע את הגודל של תיבת הטקסט, מקבל מספר תווים.
value מקבל ערך התחלתי שיהיה כתוב בתיבת הטקסט
readonly מציין האם תיבת הטקסט היא לקריאה בלבד. אין צורך לתת לו ערך, אלא רק לציין אותו.
disabled מצייו האם תיבת הטקסט היא פעילה. גם כאן, מספיק רק לציין אותו.
ההבדל בין readonly ל disabled הוא שאלמנט שהוא disabled לא ישלח עם הטופס, בעוד אלמנט שהוא readonly רק לא יהיה ניתן לשינוי.

תיבת סיסמא:

והקוד:

1.  <input type="password" name="password1">  

ההבדל בין תיבת ססמא לבין תיבת טקסט הוא שבתיבת ססמא כל הכיתוב יראה ככוכביות.

תיבות סימון:

תיבה ראשונה
תיבה שניה

והקוד:

1.  <input type="checkbox" name="check1" checked>  

2.  <input type="checkbox" name="check1">  

<input type="checkbox" name="check1" checked>

<input type="checkbox" name="check1">

מאפיינים של תיבות סימון:

name קובע את השם של תיבת הסימון.
checked במידה ומאפיין זה מצויין, תיבת הסימון תופיע מסומנת.
disabled במידה ומאפיין זה מצויין, תיבת הסימון תהיה אפורה ולא נגישה למשתמש.
value הערך שישלח לשרת אם תיבת הסימון תסומן.

כפתורי רדיו:

תיבה ראשונה
תיבה שנייה

והקוד:

1.  <input type="radio" name="radio1" checked>  

2.  <input type="radio" name="radio1">  

<input type="radio" name="radio1" checked>

<input type="radio" name="radio1">

מאפיינים של כפתורי רדיו:

name קובע את השם של כפתור הרדיו.
checked במידה ומאפיין זה מצויין, כפתור הרדיו יופיע מסומן.
disabled במידה ומאפיין זה מצויין, כפתור הרדיו יהיה אפור ולא נגיש למשתמש.
value הערך שישלח לשרת אם כפתור הרדיו יסומן.

שימו לב שכאשר מציינים את אותו השם לקבוצה של כפתורי רדיו, אפשר לסמן רק אחד מהם, וברגע שמסמנים כפתור אחר, הסימון בכפתור הראשון מתבטל.

תיבת קובץ:

והקוד:

1.  <input type="file" name="file1">  

<input type="file" name="file1">

מאפיינים של תיבת קובץ:

name קובע את השם של תיבת הקובץ.
disabled במידה ומאפיין זה מצויין, תיבת הקובץ תהיה אפורה ולא נגישה למשתמש.
size קובע את הגודל של תיבת הקובץ, מקבל מספר תווים.
accept מצייו איזה סוגי קבצים התיבה יכולה לקבל.

אלמנט מוסתר:

לא פעם אנו רוצים לשלוח ביחד עם הטופס דברים שהגולש לא צריך לראות.
בשביל זה משתמשים באלמנט מוסתר.


והקוד:

1.  <input type="hidden" name="hidden1">  

<input type="hidden" name="hidden1">

מאפיינים של אלמנט מוסתר זהים למאפיינים של תיבת טקסט.

כפתור:

<input type="button" name="button1" value="button">  

<input type="button" name="button1" value="button">

מאפיינים של כפתורים:

name קובע את שם הכפתור.
disabled במידה ומאפיין זה מצויין, הכפתור יהיה אפור ולא נגיש למשתמש.
value קובע את הטקסט שיהיה מוצג על הכפתור.

כפתורים משמשים אותנו בכדי לבצע פעולות בדף. ב HTML אין להם משמעות, אבל הם יהיו משמעותיים בשלב מאוחר יותר, כשנלמד איך משלבים סקריפטים בדף.

כפתור ניקוי טופס:

והקוד:

1.    <input type="reset" name="reset1" value="reset">

<input type="reset" name="reset1" value="reset">

כפתור שליחה:

והקוד:

1.  <input type="submit" name="submit1" value="submit">  

<input type="submit" name="submit1" value="submit">

הכפתור הזה אחראי לשליחה של הטופס. הוא מקבל את אותם מאפיינים של כפתור.

תמונה:

והקוד:

1.  <input type="image" name="image1" src="/images/b.gif">  

<input type="image" name="image1" src="/images/b.gif">

זה עוד אלמנט שאחראי על שליחת הטופס. הוא מקבל גם מאפיין src, שמציין את מיקום התמונה, ומאפיינים width ו height, שמציינים את רוחב וגובה התמונה.

אזורי טקסט:

והקוד:

1.  <textarea rows="5" cols="20" name="textarea1"></textarea>  

<textarea rows="5" cols="20" name="textarea1"></textarea>

המאפיינים של אזור טקסט:

name מציין את השם של איזור הטקסט.
disabled במידה ומאפיין זה מצויין, איזור הטקסט יהיה אפור ובלתי נגיש לגולש.
readonly במידה ומאפיין זה מצויין, איזור הטקסט יהיה בלתי ניתן לשינוי.
rows מציין את מספר השורות של איזור הטקסט.
cols מציין את הרוחב של איזור הטקסט, במספר תווים.

הטקסט הראשוני שנרצה לשים באיזור הטקסט יכתב בין התג הפותח לתג הסוגר.

תיבת בחירה:

אחד שנים שלוש

והקוד:

1.  <select name=select1>  

2.      <option value="1">אחד</option>  

3.      <option value="2">שנים</option>  

4.      <option value="3">שלוש</option>  

5.  </select >  

6.     

<select name=select1>

    <option value="1">אחד</option>

    <option value="2">שנים</option>

    <option value="3">שלוש</option>

</select >

המאפיינים של תיבות בחירה:

name קובע את שם התיבה
disabled במידה ומאפיין זה מצויין, תיבת הבחירה יהיה אפורה ובלתי נגישה לגולש.

תיבת בחירה מרובה:

אחד שנים שלוש ארבע

והקוד:

1.  <select name=select1 size="3" multiple>  

2.      <option value="1">אחד</option>  

3.      <option value="2">שנים</option>  

4.      <option value="3">שלוש</option>  

5.      <option value="4">ארבע</option>  

6.  </select >  

          

בדיוק כמו תיבת בחירה רגילה, רק שכאן הוספנו שני מאפיינים:

size קובע את מספר האופציות שיוצגו לגולש.
multiple מאפשר בחירה מרובה.

אפשר להשתמש ב size גם בלי להשתמש ב multiple.

<html>

<head>

    <title>.זוהי כותרת הדף</title>

</head>

<frameset rows="10%,*">

    <frame src="framesTop.html" name="topFrame">

        <frameset cols="20%,*">

            <frame src="framesLeft.html" name="leftFrame">

            <frame src="frames.html" name="mainFrame">

        </framset>

</framset>

</html>

<html>

<head>

    <title>my first html page</title>

</head>

<body>

    זהו גוף המסמך.

    כאן יבוא כל הטקסט

    שנרצה להציג בדפדפן.

</body>

</html>